
<template>
  <div>
    <vxe-table
      :ref="gridRef"
      :data="gridData"
      :align="$attrs.allAlign"
      :stripe="stripe"
      :border="border"
      :highlight-current-row="isHighLightCurrRow"
      :highlight-hover-row="isHighLighthoverRow"
      :highlight-current-column="isHighLightCurrcolumn"
      :highlight-hover-column="isHighLighthovercolumn"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
      :radio-config="{ labelField: 'role' }"
      :seq-config="{
        startIndex: isSeqConfig
          ? (tablePage.currentPage - 1) * tablePage.pageSize
          : null,
      }"
      :checkbox-config="{
        labelField: '',
        highlight: false,
        range: false,
        checkStrictly: false,
        trigger: 'cell',
        reserve: true,
        showHeader: true,
      }"
      @edit-actived="editActivedEvent"
      @edit-closed="editClosedEvent"
    >
      <vxe-table-column
        type="seq"
        title="序号"
        width="60"
        v-if="isShowIndex"
      ></vxe-table-column>
      <!-- <vxe-table-column title="dd" field="accountIsUsed" width="60">
        <template v-slot="{ row }">
        <el-checkbox v-model="row.accountIsUsed"></el-checkbox>
        </template>
      </vxe-table-column>
      <vxe-table-column title="cc" width="60">
        <el-checkbox></el-checkbox>
      </vxe-table-column> -->
      <vxe-table-column
        v-for="item in gridColumnData"
        :key="item.dataId"
        :field="item.code"
        :title="item.title"
        v-if="item.isVisiable"
      >
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      perfect
      size="mini"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.total"
      :pager-count="tablePage.pagerCount"
      :layouts="tablePage.layouts"
      :auto-hidden="tablePage.autoHidden"
      @page-change="handlePageChange"
    ></vxe-pager>
  </div>
</template>

<script>
import * as gridAdpter from "@/components/vxeGrid/js/gridAdapter.js";
import "@/components/vxeGrid/js/gridRenderer.js";
import "@/components/vxeGrid/js/gridFormats.js";
import { getVxeGridColoumnData } from "@/components/api/vxeGrid.js";
export default {
  name: "vxeGrid",
  props: {
    gridRef: {
      //自定义列表ref
      type: String,
      default() {
        return "vxeGrid";
      },
    },
    gridData: {
      type: Array,
      required: true,
      default: function () {
        return [];
      },
    },
    // 第几个表格
    which: {
      type: [Number, String],
      default() {
        return 1;
      },
    },
    isCustom: {
      // 是否自定义列
      type: Boolean,
      default: function () {
        return true;
      },
    },
    gridColumnData: {
      // 自定义列 当isCustom === true 生效
      type: Array,
      required: true,
      default: function () {
        return [];
      },
    },
    setConfig: {
    //配置数据项
      type: Object,
      default: function () {
        return {};
      },
    },
    border: {
      //表格边框。border=false|default 默认显示边框； border=true|full 显示完整边框； border=outer 显示外边框； border=inner 显示内边框； border=none 去掉所有边框。
      type: String,
      default: function () {
        return "full";
      },
    },
    // allAlign:{ //列表内容居左：left；居中：center；居右：right；
    //   type:String,
    //   default:function(){
    //     return "center";
    //   }
    // },
    isShowIndex: {
      //是否显示序号列 fixed
      type: Boolean,
      default: function () {
        return true;
      },
    },
    border: {
      //表格边框。border=false|default 默认显示边框； border=true|full 显示完整边框； border=outer 显示外边框； border=inner 显示内边框； border=none 去掉所有边框。
      type: String,
      default: function () {
        return "full";
      },
    },
    stripe: {
      //stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。
      type: Boolean,
      default: function () {
        return true;
      },
    },
    isHighLightCurrRow: {
      //配置highlight-current-row属性即可实现选中行数据。
      type: Boolean,
      default: function () {
        return false;
      },
    },
    isHighLighthoverRow: {
      //配置highlight-hover-row属性即可实现鼠标划过行加高亮。
      type: Boolean,
      default: function () {
        return true;
      },
    },
    isHighLightCurrcolumn: {
      //配置highlight-current-column属性即可实现列选中。
      type: Boolean,
      default: function () {
        return true;
      },
    },
    isHighLighthovercolumn: {
      //配置highlight-hover-column属性即可实现鼠标划过列加高亮。
      type: Boolean,
      default: function () {
        return true;
      },
    },
  },
  data() {
    return {
      _cacheData: {}, // 数据缓存
      columnData: [], //配置列
      isSeqConfig: false,
      tableSetting: {
        isEdit: false, //是否可编辑
        isLock: false, //是否锁定
        totalTag: false, //是否合计
        config: {
          rowChecked: "cell", //行选中row or cell
          operate: false, //操作列
        },
      },
      tablePage: {
        align: "left",
        pagerCount: 5,
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: [
          "Sizes",
          "PrevJump",
          "PrevPage",
          "Number",
          "NextPage",
          "NextJump",
          "FullJump",
          "Total",
        ],
        perfect: true,
        autoHidden: false,
      },
    };
  },
  watch: {
    "setConfig.tablePage": {
      handler(val, oldVal) {
        this.tablePage.total = val.total;
        this.tablePage.currentPage = val.currentPage;
        this.tablePage.pageSize = val.pageSize;
        this.tablePage.pagerCount = val.pagerCount;
      },
      deep: true,
      // immediate: true,
    },
  },
  inheritAttrs: false, // inheritAttrs的默认值为true, 将inheritAttrs的值设为false, 这些默认的行为会禁止掉。但是通过实例属性$attrs ,可以将这些特性生效，且可以通过v-bind 绑定到子组件的非根元素上
  components: {},
  computed: {
    //列的处理，主要有适配，格式化，校验规则，初始化业务需要到的功能。
    columnDataList(val) {
      if (this.columnData.length > 0) {
        // 把业务列适配到vxetable表格上
        let convertColObj = gridAdpter.adapterColumns(this);
        //适配后的列
        this.columnData = convertColObj.aryCols;
        // //表格的校验和 弹出form表单窗口的校验规则是一样的
        // this.formRules = this.validRules = convertColObj.validRules;
        // //弹窗口的表单数据
        // this.formItems = convertColObj.formItems;
        //加上序列号和选择框
        let addSeqCheckCols = this.mergeCommonSt(convertColObj.aryCols);
        //初始化列
        this.initCols(addSeqCheckCols, this.$refs[this.gridRef]);
      }
      return this.columnData;
    },
  },
  created() {
    this.tablePage = Object.assign(
      {},
      this.tablePage,
      this.setConfig.tablePage
    );
    this.tableSetting = Object.assign(
      {},
      this.tableSetting,
      this.setConfig.tableSetting
    );
  },
  mounted() {
    if (this.isCustom) {
      this.columnData = this.gridColumnData;
    } else {
      // this.requestColumns();
    }
  },
  methods: {
    //添加复选框和序列号 Object.assign
    mergeCommonSt() {
      let tempCols = this.columnData;
      if (this.checkStyle !== "false") {
        //  字符串参数为false时，不添加类型
        tempCols.unshift({
          type: this.checkStyle,
          title: "",
          width: 40,
          resizable: false, //序列和选择框不能拖动
        }); //属性待加
      }
      if (this.seq) {
        tempCols.unshift({
          type: "seq",
          width: 50,
          title: "序号",
          resizable: false,
        }); //属性待加
      }
      return tempCols;
    },
    requestColumns() {
      let params = {
        path: this.url || window.location.pathname,
        which: this.which,
      };
      getVxeGridColoumnData(params).then((res) => {
        if (res.data) {
          this.columnData = res.data.tableColumns;
          //库里的config配置项优先级最高
          this.tableSetting = Object.assign(
            {},
            this.tableSetting,
            res.data.tabulation
          );
        }
      });
    },
    editActivedEvent({ row, column }, event) {
      //打开列编辑
      // 当激活编辑时，重新更新远程下拉值
      if (column.type === "select") {
        let eleCode = row["__rep_" + column.own.code] || column.own.code; // row["__rep_" + eleCode]数据行，替换数据要素，存在替换数据要素时，优先取该要素值;
        if (this._cacheData[eleCode]) {
          column.editRender.options = this._cacheData[eleCode];
        } else {
          // this.$axios
          //   .get("/apis/md/dic/dsdata/standard?elementCode=" + eleCode)
          //   .then((res) => {
          //     if (res.resultCode === 200) {
          //       this._cacheData[eleCode] = res.data;
          //       column.editRender.options = res.data;
          //     }
          //   });
        }
      }
      this.$emit("gridEditActiveCallback", { row, column }, event);
    },
    editClosedEvent({ row, column }, event) {
      //关闭列编辑
      this.$emit("gridEditCloseCallback", { row, column }, event);
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
    },
  },
};
</script>

<style scoped>
</style>
